<template>
    
<div class="GrandFather">
    <h1>祖父组件</h1>
    <p>a:{{ a }} b:{{ b }} c:{{ c }}</p>
    <!-- 传递方法 -->
    <Father :a="a" v-bind="{b:b,c:c,fun:updateB}"/>
</div>
</template>

<script lang="ts">
export default {
name:'GrandFather'
}
</script>

<script setup lang="ts">
import { ref } from 'vue';
import Father from './Father.vue';

let a = ref(0)
let b = ref(0)
let c = ref(0)

function updateB(val:number) { 
    b.value+=val
}

</script>

<style lang="css">
.GrandFather{
    margin: 20px;
    height: 600px;
    width: 500px;
    background-color:aquamarine;
}
</style>